<template>
  <view>
    <view class="searchBarView">
      <uni-search-bar @input="inputSearch" placeholder="请输入关键词" class="searchBar" focus="true"></uni-search-bar>
    </view>
    <view class="searchList">
      <view class="historyBox" v-if="keyWord.length==0">
        <!-- 搜索历史和图标 -->
        <view class="historyOp">
          <view class="historyTitle">
            <text>搜索历史</text>
          </view>
          <view class="deleteHisBtn">
            <uni-icons type="trash" size="17" @click="clearHisList"></uni-icons>
          </view>
        </view>
        <view class="historyResult">
          <!-- 历史记录标签 -->
          <uni-tag :text="item" class="historyItem" v-for="(item,i) in historyList" :key="i"
            @click="gotoGoodsListByName(item)"></uni-tag>
        </view>
      </view>
    </view>
    <view class="searchItem">
      <view class="goodsRow" v-for="(item,i) in searchList" :key="i" @click="gotoDetailById(item.goods_id)">
        <view class="goodsName">{{item.goods_name}}</view>
        <uni-icons type="right" size="14"></uni-icons>
      </view>
    </view>
  </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        timer: null,
        searchList: [],
        keyWord: "",
        historyList: []
      };
    },
    methods: {
      clearHisList() {
        this.historyList = []
        uni.setStorageSync("hisKeyWord", "[]")
      },
      inputSearch(e) {
        clearTimeout(this.timer)
        this.timer = setTimeout(() => {
          this.keyWord = e
          if (this.keyWord.trim().length !== 0) {
            this.getSearchList()
          } else {
            this.searchList = []
          }
        }, 500)

      },
      async getSearchList() {
        const {
          data: res
        } = await uni.$http.get('/api/public/v1/goods/qsearch?query=' + this.keyWord)
        if (res.meta.status !== 200) {
          return uni.$showMsg()
        }
        this.searchList = res.message
      },
      gotoDetailById(id) {
        uni.navigateTo({
          url: '/packageA/goods_detail/goods_detail?goods_id=' + id
        })
        this.saveSearchHis()
      },
      gotoDetailByName(name) {
        uni.navigateTo({
          url: '/packageA/goods_list/goods_list?query=' + name
        })
        this.saveSearchHis()
      },
      saveSearchHis() {
        // 点击详情后才记录搜索历史
        this.historyList.push(this.keyWord)
        const set = new Set(this.historyList)
        set.delete(this.keyWord)
        set.add(this.keyWord)
        this.historyList = Array.from(set).reverse()
        uni.setStorageSync("hisKeyWord", JSON.stringify(this.historyList))
      }
    },
    onLoad() {
      this.historyList = JSON.parse(uni.getStorageSync("hisKeyWord") || "[]")
    }
  }
</script>

<style lang="scss">
  .historyBox {
    display: flex;
    flex-direction: column;

    .historyOp {
      display: flex;
      padding: 0 10px;
      margin-bottom: 15px;
      justify-content: space-between;
    }

    .historyResult {
      display: flex;

      .historyItem {
        margin-left: 5px;

        .uni-tag {
          background-color: cornsilk;
          margin-left: 10px;
          color: black;
        }
      }

    }
  }

  .searchBarView {
    background-color: #55aaff;
  }

  .searchBar {
    border-radius: 18px;
  }

  .searchList {
    margin-top: 15px;

    .goodsRow {
      justify-content: space-between;
      display: flex;
      margin-bottom: 15px;
      margin-left: 10px;

      .goodsName {
        font-weight: 500;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-right: 3px;
      }
    }
  }
</style>